<template>
  <div id = 'OrderGantt' style="height: 100%">
    <el-menu
      :default-active="1"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      default-active="1"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="0" class="menu_item" @click="toHomePage" style="width: 100px">
        <i class="el-icon-s-home" style="font-size: 50px; margin-right: 25px"></i>
      </el-menu-item>
      <el-menu-item index="1" class="menu_item" @click="toOrderGantt">订单甘特图</el-menu-item>
      <el-menu-item index="2" class="menu_item" @click="toResourceGantt">资源甘特图</el-menu-item>
      <el-menu-item index="3" class="menu_item" @click="toResourceLoad">资源负载图</el-menu-item>
      <el-menu-item index="4" class="menu_item">
        <a href="http://localhost/#/index">新系统</a>
      </el-menu-item>

      <div align="right" style="padding-right: 60px; margin-top: 10px">
        <el-input
          placeholder="请输入搜索内容"
          style="width: 300px"
          :disabled=inputDisable
          v-model="searchInput">
          <el-button slot="append" icon="el-icon-search" @click="trick" :disabled=inputDisable></el-button>
        </el-input>
      </div>
    </el-menu>
    <el-row><div class="title">订单甘特图</div></el-row>
    <el-row>
      <el-col :span="12" style="height: 100%">
        <div align="right" style="padding-right: 40px">
          <el-row>
            <el-progress
              type="circle"
              :percentage="progressPercentage"
              :color="progressColor"
              :stroke-width="20"
              :width="150"
              class="progress"></el-progress>
          </el-row>
          <el-row>
            <div style="padding-right: 60px; padding-top: 5px; font-size: 20px">按时交货率</div>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
        <br>
        <el-row class="date">当前日期 : {{curDate}}</el-row>
        <el-row style="padding-top: 10px">
          <el-date-picker
            v-model="selectedDate"
            type="date"
            placeholder="选择查询日期"
            size="large"
            class="date_picker">
          </el-date-picker>
          <el-button type="primary" @click="search">查询</el-button>
        </el-row>
      </el-col>
    </el-row>
    <br>
    <el-row
      style="height: 80px;font-size: 30px;font-weight: bold; line-height: 80px; margin-bottom: 20px"
      class="test">
      <el-col :span="3" :offset="2" align="center" style="border-style: solid"><div>订单号</div></el-col>
      <el-col :span="16" :offset="1" align="center" style="border-style: solid"><div style="width: 96%">订单进度</div></el-col>
    </el-row>
    <br>
    <el-row v-for="order in orders" style="height: 60px; margin-bottom: 10px">
      <el-col :span="3" style="height: 100%; border-style: solid" :offset="2" align="center">
        <div style="line-height: 60px">
          {{order.orderId}}
        </div>
      </el-col>
      <el-col :span="16" style="height: 100%; padding: 0" :offset="1" align="left">
        <el-row style="padding-bottom: 10px">
          <div v-for="step in order.stepList" :style="{width: step.stepWeight, lineHeight: '60px', display: 'inline-block', fontSize: '10px'}" class="ganttBlock">
            <div v-show="step.normalProgress !== '0%'" :style="{width: step.normalWidth, backgroundColor: normalColor, opacity: step.opacity, display: 'inline-block', textAlign: 'center', borderStyle: 'solid'}">
              {{step.stepName}}{{step.normalProgress}}
            </div>
            <div v-show="step.delayProgress !== '0%'" :style="{width: step.delayWidth, backgroundColor: delayColor, display: 'inline-block', textAlign: 'center', borderStyle: 'solid'}">
              {{step.stepName}}延期{{step.delayProgress}}
            </div>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import {getOrderGanttByDate, getPunctualRatioByTime} from "../api";

    export default {
        name: "OrderGantt",
        data() {
            return {
                searchInput: '',
                inputDisable: false,
                progressPercentage: 0,
                progressColor: '',
                curDate: '2018-10-21',
                selectedDate: '',
                normalColor: '#3d92b8',
                delayColor: '#de0000',
                orders:[]
            };
        },
        methods: {
            trick() {
                this.$alert('恭喜你发现了一个彩蛋，这个按钮实际上没有任何作用！^_^', 'TRICK!!!', {
                    confirmButtonText: '我知道了'
                });
                this.searchInput = '';
                this.inputDisable = true;
            },
            toHomePage(){
                this.$router.push({path: '/'});
            },
            toOrderGantt(){
                this.$router.push({path: '/OrderGantt'});
            },
            toResourceGantt(){
                this.$router.push({path: '/ResourceGantt'});
            },
            toResourceLoad(){
                this.$router.push({path: '/ResourceLoad'});
            },

            //选择日期并查询
            search() {
                if (this.selectedDate !== ''){
                    this.selectedDate = this.dateFormat(this.selectedDate);
                    this.curDate = this.selectedDate;
                    this.getProgressPercentage();
                    this.getOrdersDetails();
                    this.selectedDate = '';
                }
            },

            //获取按期交货率
            getProgressPercentage() {
                getPunctualRatioByTime(this.curDate).then(res =>{
                    this.progressPercentage = parseFloat(res);
                });
                this.calculateProgressColor();
            },

            //计算按期交货率颜色
            calculateProgressColor() {
                if (parseFloat(this.progressPercentage) > 80){
                    this.progressColor = '#00FF00';
                }
                else if (parseFloat(this.progressPercentage) > 60){
                    this.progressColor = '#00FFFF';
                }
                else if (parseFloat(this.progressPercentage) > 40){
                    this.progressColor = '#FFFF00';
                }
                else if (parseFloat(this.progressPercentage) > 20){
                    this.progressColor = '#FFA500';
                }
                else {
                    this.progressColor = '#FF0000';
                }
            },

            //获取订单甘特图数据
            getOrdersDetails() {
                getOrderGanttByDate(this.curDate).then(res =>{
                    this.orders = [];
                    for (let i = 0; i < res.length; i ++){
                        let o = res[i];
                        let order = {
                            orderId: o.orderID,
                            state : o.state
                        };
                        let stepList = [];
                        for (let j = 0; j < o.stepList.length; j ++){
                            let s = o.stepList[j];
                            let step = {
                                stepName: s.stepName,
                                stepWeight: s.weight + '%',
                                normalProgress: s.normalProgress + '%',
                                normalWidth: s.normalProgress + '%',
                                delayProgress: s.delayProgress + '%',
                                delayWidth: s.delayProgress * 0.9 + '%',
                            };
                            let opacity = 50 + parseFloat(s.normalProgress) / 2;
                            step.opacity = opacity.toString() + '%';
                            stepList[stepList.length] = step;
                        }
                        order.stepList = stepList;
                        this.orders[this.orders.length] = order;                    }
                });
            },

            dateFormat(date){
                let year = date.getFullYear()
                let month = date.getMonth() + 1
                let day = date.getDate()
                if (month < 10) month = '0' + month
                if (day < 10) day = '0' + day
                return year + '-' + month + '-' +day
            }
        },
        mounted() {
            this.getProgressPercentage();
            this.getOrdersDetails();
        }
    }
</script>

<style scoped>

  .menu_item {
    width: 150px;
    font-size: larger;
    text-align: center;
    font-weight: bold;
  }

  .title {
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .progress {
    font-weight: bold;
    font-size: 20px;
    margin-left: auto;
    margin-right: 40px;
  }

  .date {
    font-size: 40px;

  }

  .date_picker {
    height: 60px;
    line-height: 60px;
    width: 300px;
  }
</style>
